<template>
	<view class="content">
		账号登录
		<div class="log">
			<form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="username" name="用户名" ref="inputnume" label="" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写用户名' }]" />

					<van-cell-group>
						<van-field @change="sss()" ref="inputref" v-model="inputval" center clearable label="" placeholder="请输入短信验证码" use-button-slot>
							<van-button slot="button" @click="yan()" :disabled="showtime" size="small" type="primary">{{ showtime ? time + 's' : '发送验证码' }}</van-button>
						</van-field>
					</van-cell-group>
				</van-cell-group>
				<div style="margin: 16px;"><van-button round block type="primary" @click="loginto()" :disabled="login" native-type="submit">登录</van-button></div>
			</form>
		</div>
		<div class="code">
			<p>验证码 ：{{ codenum }}</p>
		</div>
	</view>
</template>
<script>
import { ref } from 'vue';
export default {
	setup() {
		const username = ref('lzy');
		const codenum = ref(123456);
		const inputval = ref();
		const inputref = ref();
		const showtime = ref(false);
		const login = ref(true);
		const time = ref(10);
		const inputnume = ref();

		// 验证码倒计时
		const yan = () => {
			showtime.value = !showtime.value;
			let result = setInterval(() => {
				time.value--;
				console.log(time.value);
				// this.codeTest = this.second
				if (time.value < 1) {
					clearInterval(result);
					showtime.value = !showtime.value;
					time.value = 10;
				}
			}, 1000);
		};

		// 监听修改验证码框
		const sss = () => {
			console.log(inputref.value.value);
			if (inputref.value.value.length >= 6) {
				login.value = false;
			} else {
				login.value = true;
			}
		};

		const loginto = () => {
			uni.setStorageSync(
				'phone', inputnume.value.value
			);
			uni.reLaunch (
			{
				//关闭当前页面，跳转到应用内的某个页面。
				url: '/pages/page3/page3'
			}
			);
			
		};
		return {
			username,
			yan,
			sss,
			inputref,
			inputval,
			showtime,
			time,
			codenum,
			login,
			loginto,
			inputnume
		};
	}
};
</script>

<style lang="scss">
.log {
	margin: 100px 0 20px 0;
}
.code {
	width: 40%;
	// background-color: pink;
	margin: 0 auto;
}
</style>
